<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab选项卡</title>
<style type="text/css">
	*{
		padding:0;
		margin: 0;
/*		盒模型*/
		box-sizing: border-box;
	}
	body{
		display:flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background: #282c34;
	}
	.tab{
		width:700px;
		height: 250px;
		color: #607291;
		background: #fff;
		overflow: hidden;
	}
	input{
		display:none;
	}
	label{
		float:left;
		width: 140px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		background: #e5e9ea;
		transform: all .3s;
	}
	label:hover{
		background:#fff;
	}
	label img{
		width:20px;
		height: 20px;
		vertical-align: middle;
		margin-top: -5px;
		margin-right: 5px;
	}
	ul{
/*		清除浮动*/
		clear:both;
		width: 3500px;
		height: 210px;
		transform: all .5s;
	}
	ul li{
		float:left;
		list-style: none;
		width: 700px;
		height: 210px;
		padding: 40px;
	}
	ul li img{
		float:left;
		width: 130px;
		height: 130px;
		margin-right: 20px;
	}
	ul li p{
/*		首行缩进2*/
		text-indent: 2em;
/*		伸缩盒子模型*/
		display: -webkit-box;
/*		在伸缩盒子模型里让子元素垂直排列*/
		-webkit-box-orient: vertical;
/*		这不是css标准语句 需要配合上面两行属性使用 意思是只显示三行*/
		-webkit-line-clamp: 3;
/*		溢出隐藏*/
		overflow: hidden;
/*		溢出隐藏的文字呈现省略号*/
		text-overflow: ellipsis;
		margin-top: 20px;
	}
	#tab1:checked~ul{margin-left:0;}
	#tab2:checked~ul{margin-left:-700px;}
	#tab3:checked~ul{margin-left:-1400px;}
	#tab4:checked~ul{margin-left:-2100px;}
	#tab5:checked~ul{margin-left:-2800px;}
	
	#tab1:checked~label[for="tab1"]{background:#fff;}
	#tab2:checked~label[for="tab2"]{background:#fff;}
	#tab3:checked~label[for="tab3"]{background:#fff;}
	#tab4:checked~label[for="tab4"]{background:#fff;}
	#tab5:checked~label[for="tab5"]{background:#fff; }
	
</style>
</head>

<body>
	<div class="tab">
		<input type="radio" name="tab" id="tab1">
		<input type="radio" name="tab" id="tab2">
		<input type="radio" name="tab" id="tab3">
		<input type="radio" name="tab" id="tab4">
		<input type="radio" name="tab" id="tab5">
		<label for="tab1"><img src="../images/11.png">PS</label>
		<label for="tab2"><img src="../images/12.png">Q</label>
		<label for="tab3"><img src="../images/13.png">W</label>
		<label for="tab4"><img src="../images/14.png">E</label>
		<label for="tab5"><img src="../images/15.png">R</label>
		<ul>
			<li><img src="../images/11.png"><h2>浪客之道</h2><p>百折不屈:亚索在移动的同时会积攒剑意—移动得越快，剑意的获取就越快。当剑意槽被充满时，在受到来自英雄或野怪的伤害的同时，亚索获得一层吸收(120一605)伤害(随英雄等级成长)的护盾。 向死而生:亚索的暴击几率提升150%，但暴击伤害会降低10%。 这个效果的计算顺序处在所有其它的暴击几率修正效果之后。 额外暴击几率转化为攻击力的转化比：每1%暴击几率转化为0.4攻击力</p></li>
			<li><img src="../images/12.png"><h2>斩钢闪</h2><p>向前出剑，造成(20/45/70/95/120 +60%AD)物理伤害。 在命中时，斩钢闪会获得层旋风烈斩效果， 持续6秒。在积攒2层旋风烈斩效果后，斩钢闪会形成一阵能够击飞敌人的旋风。 斩钢闪被视为普通攻击:它可以暴击，附带攻击特效，会被控制效果所中断，并且它的冷却时间和施法时间都会从攻击速度上获得收益。 如果在突进的过程中施放斩钢闪，那么斩钢闪就会呈环状出剑</p></li>
			<li><img src="../images/13.png"><h2>风之障壁</h2><p>形成一个持续4秒的气流之墙，来阻挡敌方的飞行道具。 宽度：320/390/460530/600</p></li>
			<li><img src="../images/14.png"><h2>踏前斩</h2><p>向目标敌人突进，造成(60/70/80/90/100 +60%AP +20%额外AD)魔法伤害。每次施法都会使你的下一次突进的基础伤害提升25%，最多提升至50%。 在10秒内无法对相同敌人重复施放。 如果在途径的过程中施放斩钢闪，那么斩钢闪就会呈环状出剑。 每位单位的冷却时间：10/9/8/7/6</p></li>
			<li><img src="../images/15.png"><h2>狂风绝息斩</h2><p>闪烁到一个浮空的敌方英雄身边，造成(200/350/500 +150%额外AD)物理伤害，并使范围内的所有浮空的敌人在空中多停留1秒。获得满额的剑意值，但会重置旋风 烈斩的层数。 在接下来的15秒里，亚索的暴击会获得50%的额外护甲穿透加成——这个效果能够无视目标的来自装备、增益、符文的护甲值</p></li>
		</ul>
	</div>
</body>
</html>
